<template>
  <div class="header">
    <img src="@/assets/33.jpg" alt="" width="60" height="60" />
    <h2>TMS智慧物流管理系统</h2>
    <div class="user_Name">
      <h4>
        {{ currentTime }} &nbsp;&nbsp;&nbsp;&nbsp;当前用户：<span>{{
          username
        }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;

        <el-dropdown trigger="hover">
          <span class="el-dropdown-link userinfo-inner">
            {{ sysUserName }}
            <a href="#" style="color: #fff; font-size: 20px"
              ><i class="el-icon-switch-button"></i
            ></a>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="myNews">
              <el-badge :value="num" class="item" type="warning">
                我的消息
              </el-badge>
            </el-dropdown-item>
            <el-dropdown-item @click.native="Setting">设置</el-dropdown-item>
            <el-dropdown-item divided @click.native="login"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </h4>
    </div>
    <div>
      <el-dialog title="Unread Messages" :visible.sync="NewsVisible">
        <div>
          <el-tag
            v-for="tag in tagNews"
            :key="tag.name"
            closable
            @close="Close(tag)"
            class="tag-new"
            :type="tag.type"
            @click.native="onClick(tag.name)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "", //定义一个定时器的变量
      currentTime: new Date(), // 获取当前时间
      username: "",
      newsDialogCss: "news-dialog",
      NewsVisible: false,
      num: 0,
      tagNews: [
        { name: "合同审批", type: "" },
        { name: "系统通知", type: "success" },
        { name: "我的消息", type: "info" },
        { name: "外协报告！", type: "warning" },
        { name: "监听报告！", type: "danger" },
      ],
    };
  },
  created() {
    this.username = window.sessionStorage.getItem("userName");
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function() {
      _this.currentTime = //修改数据date
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ": " +
        new Date().getSeconds();
    }, 1000);
  },
  //过滤加0
  appendZero(obj) {
    if (obj < 10) {
      return "0" + obj;
    } else {
      return obj;
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    login() {
      //跳转到指定页面
      this.$router.push({
        path: "/",
      });
    },
    myNews() {
      this.NewsVisible = true;
    },
    closeZModalShadow() {
      this.NewsVisible = false;
    },
  },
};
</script>

<style scoped>
.header {
  height: 60px;
  background-color: #dd962b;
  border-bottom: 2px solid cadetblue;
}
.header img {
  float: left;
  margin-top: 10px;
  margin-left: 25px;
}
.header h2 {
  float: left;
  margin-left: 20px;
  margin-top: 13px;
  color: white;
}
.user_Name {
  float: right;
  color: #fff;
  margin-right: 25px;
}
</style>
